<template>
	<div id="Intel" :style="{height: currHeight + 'px'}">
		<!-- 头部导航条 -->
		<div class="top_">
			<van-nav-bar title="我的积分" left-text="返回" left-arrow
			     @click-left="onClickLeft"
			     @click-right="onClickRight"
			>
			<template #right>
			    <van-icon name="ellipsis" size="18" />
			</template>
			</van-nav-bar>
		</div>

		<div class="count">
		<!-- 内容 -->
		<div class="center">
			<div class="balance_text">积分余额</div>
			<div class="balance">{{balance}}</div>
		</div>
		<!-- 引导 -->
		<div class="guide">
			<div class="guide_">
				<router-link to='JFDH'>
					<div class="integral_">积分兑换</div>
				</router-link>
				<div class="gang">|</div>
				<div class="integral">积分规则</div>
			</div>
		</div>
		<!-- 循环 -->
		<div class="cyclic">
			<div class="cy" v-for="(item,index) in lists" :key="index">
				<div class="cy1">{{item.data}}</div>
				<div class="cy2">{{item.approach}}</div>
				<div class="cy3">{{item.count}}</div>
			</div>
		</div>
	</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				balance:'20000.0',
				currHeight: '',
				active: 2,
				lists: [{
						data: "2016.06 .09",
						approach: "分享积分",
						count: "+6",
					},
					{
						data:"2016.06 .09",
						approach: "分享积分",
						count: "+6",
					},
					{
						data:"2016.06 .09",
						approach: "分享积分",
						count: "+6",
					},
					{
						data:"2016.06 .09",
						approach: "分享积分",
						count: "+6",
					},
				]
			};
		},
		methods: {
			  
    onClickLeft() {
      
      this.$router.go(-1);
	  // this.$router.replace('/')
    },
    onClickRight() {
      
    },
		},
		mounted() {
			this.currHeight = document.documentElement.clientHeight
			window.onresize = () => {
			this.currHeight = document.documentElement.clientHeight
			}
		},
	};
</script>

<style scoped lang="less">
	#Intel{
		background: #F3F4F6;
		width: 100%;
	}
.count{
	padding-top:80px;
} 
	// 积分余额
	.center {
		width: 100%;
		background: white;
		height: 160px;
		padding-left: 24px;
		padding-right: 24px;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid gray;

		.balance_text {
			width: 25%;
			font-size: 40px;
			font-family: HiraginoSansGB;
			font-weight: normal;
			color: #333333;
			margin-top: 40px;
		}

		.balance {
			width: 20%;
			margin-top: 40px;
			height: 24px;
			font-size: 30px;
			font-family: HiraginoSansGB;
			font-weight: bold;
			color: #FF4242;
		}
	}

	// 引导
	.guide {
		width: 100%;
		background-color: white;
		height: 100px;
		box-sizing: border-box;
		
		
		.guide_ {
			width:100%;
			display: flex;
			justify-content: space-between;
			    box-sizing: border-box;
			    padding-left: 12px;
			.gang {
				height: 50px;
			}
			.integral_{
				margin-left: 40px;
				margin-top: 30px;
				width: 100%;
				color: #234497;
				font-size: 20px;
			}
			.integral {
				width: 20%;
				margin-top: 30px;
				// margin-right: 5%;
				font-size: 20px;
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: #234497;
			}

		}
	}

	// 循环
	.cyclic {
		margin-top: 20px;
		width: 100%;
		background: white;
		box-sizing: border-box;
		padding: 39px 61px 42px 20px;
		.cy {
			width: 100%;
			background: white;
			height: 100px;
			display: flex;
			justify-content: space-between;
			.cy1{
				font-size: 24px;
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: #333333;
			}
			.cy2{
				font-size: 24px;
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: #333333;
			}
			.cy3{
				font-size: 24px;
				font-family: HiraginoSansGB;
				font-weight: bold;
				color: #FF5858;
			}
		}
	}
</style>
